<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JSX插值表达式</title>
	</head>
	<body>
		<div id="app"></div>
		
		<script src="./js/react17.development.js"></script>
		<script src="./js/react-dom17.development.js"></script>
		<script src="./js/babel.min.js"></script>
		<script type="text/babel">
			
			class Home extends React.Component {
				
				render() {
					return <div>
						<h2>类组件中事件驱动</h2>
						<div>
							<h4>普通事件绑定</h4>
							<button onClick={ this.handler }>直接绑定</button>
							<button onClick={ ()=> this.handler2('大牧') }>绑定并传递参数</button>
						</div>
						<div>
							<h4>获取事件对象</h4>
							<button onClick={this.handler3}>无参数,使用默认事件对象</button>
							<button onClick={(e)=> this.handler4(e, '大牧')}>带参数,使用箭头函数转换</button>
						</div>
						<div>
							<h4>关于this</h4>
							<button onClick={this.handler5}>普通绑定this指向 undefind</button>
							<button onClick={()=> this.handler5()}>箭头函数转换this指向 当前对象</button>
							<button onClick={this.handler5.bind(this)}>普通绑定+bind辅助函数this指向</button>
						</div>
					</div>
				}
				
				handler() {
					console.log("事件处理函数 执行了...")
				}
				
				handler2(name) {
					console.log("事件函数执行并获取参数:", name)
				}
				
				handler3(event) {
					console.log("事件函数执行，事件对象：", event)
				}
				
				handler4(event, name) {
					console.log("事件函数执行，事件对象：", event, "普通参数：", name)
				}
				
				handler5() {
					console.log("this指向：", this)
				}
			}
			
			ReactDOM.render(<Home></Home>, document.querySelector("#app"))
		</script>
	</body>
</html>